<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div
      id="map"
      style="height: 500px; width: 900px"
    ></div>
    <script>
      var map = L.map('map');
      //添加wms
      var wmsLayer = L.tileLayer
        .wms('http://ows.mundialis.de/services/service?', {
          layers: 'TOPO-OSM-WMS',
        })
        .addTo(map);
      //添加tms
      var tms_example = L.tileLayer(
        'http://base_url/tms/1.0.0/example_layer@png/{z}/{x}/{y}.png',
        {
          tms: true,
        }
      ).addTo(map);
    </script>
  </body>
</html>
